<template>
	<page-header :firstMenu="state.firstMenu" :secondMenu="state.secondMenu"
		    @menuClick="menuClick"  :lang="state.lang" 
			:cartCount="shopCartNum" :messageCount="4" :logo="logo"
			:username="userName" :login="login"  :company="company"  :avatar="avatar"
			:sign="t('common.sign')" :register="t('common.registration')" 
			:profile="t('index.userMenu.myProfile')" :message="t('index.userMenu.newMessage')"
			:logout="t('index.userMenu.logout')" english="English" chinese="简体中文"
			:catalog="t('index.catalog')">
	
	</page-header>

	
	<div class="home">
		<div class="banner">
			<img src="@/assets/images/u27.png" class="bg"/>
			<img src="@/assets/images/u131.png" class="info"/>
		</div>
		
		<div class="middle">
			<div class="content">
				<!-- <div class="item">
					<img src="@/assets/svg/u32.svg" class="img"/>
					
					<div class="info">
						<div class="title">
							<span class="text">
								GuangZhou
							</span>
						</div>
						<div class="position">
							<img src="@/assets/svg/u37.svg" class="img"/>
							<span class="text">
								{{t("common.address2")}}
							</span>
						</div>
					</div>
				</div>
				 -->
				<div class="item">
					<img src="@/assets/svg/u42.svg" class="img"/>
					
					<div class="info">
						<div class="title">
							<span class="text">
								HongKong
							</span>
						</div>
						<div class="position">
							<img src="@/assets/svg/u37.svg" class="img"/>
							<span class="text">
								<!-- {{t("common.address")}} -->
								One Midtown 11 Hoi Shing Road Tsuen Wan Nt, HONG KONG
							</span>
						</div>
					</div>
				</div>
				
				<div class="contact">
					<div class="span">
						<img class="img" src="@/assets/svg/u52.svg"/>
						<span class="tel">+86-20-39978826</span>
					</div>
					<div class="divide"></div>
					<div class="span">
						<img class="img" src="@/assets/svg/u55.svg"/>
						<a href="mailto:sales@comesoon.hk"><span class="email">sales@comesoon.hk</span></a>
					</div>
				</div>
				
				<div class="button_panel">
					<button class="btn" @click="state.visible=true">{{t("index.send")}}</button>
				
				</div>
			</div>	
		</div>		
		
	</div>
	
	<page-footer :logo="logo" :app-name="t('common.COMESOON')" @menuClick="menuClick"
	    :contact="t('common.contactUs')" :contact2="t('common.contactUs2')" 
		:address="t('common.address')" :address2="t('common.address2')" :learn="t('common.learnMore')"
		:copyright="t('common.copyright')"
		:about="t('common.aboutUs')" :description="t('common.supplierTip')" style="width:6rem"/>
	
	<el-dialog style="width:829px" custom-class="message"
	     :close-on-click-modal="false"  v-model="state.visible"
		:title="t('index.sendTitle')">
			
		<div class="content">
			<div class="item">
				<div class="label">{{t("index.name")}} <span class="red">*</span></div>
				<div class="text"><input type="text" v-model="state.name"/></div>
			</div>
			<div class="item">
				<div class="label">{{t("index.phone")}} <span class="red">*</span></div>
				<div class="text"><input type="text" v-model="state.phone"/></div>
			</div>
			<div class="item">
				<div class="label">{{t("index.email")}} <span class="red">*</span></div>
				<div class="text"><input type="text" v-model="state.email"/></div>
			</div>
			<div class="item">
				<div class="label">{{t("index.company")}} <span class="red">*</span></div>
				<div class="text"><input type="text" v-model="state.company"/></div>
			</div>
			<div class="item">
				<div class="label">{{t("index.message")}} <span class="red">*</span></div>
				<div class="text">
					<textarea rows="3" v-model="state.content"/>
				</div>
			</div>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<button type="primary" class="cancel" @click="state.visible=false">
					{{ $t('common.cancel') }}
				</button>
				<button type="primary" class="send" @click="confirm">
					{{ $t('common.submit') }}
				</button>
			</span>
		</template>
	
	</el-dialog>
		
	
	<!-- 新的询价-->
	<el-dialog v-model="state.showUploadInquireDialog" 
	    :close-on-click-modal="false"
	    :title="$t('Header.showUploadProductInquireTitle')"
		width="900px">
		<el-row>
			<el-col :span="12" style="padding-right:5px">
				<div style="margin-bottom:2px;display:flex">
					<div class="requireStar">{{$t('Header.form.inquiryName')}}</div>
				</div>
				<el-input v-model="state.fileForm.property" autocomplete="off" />
			</el-col>
			<el-col :span="12">
				<div style="margin-bottom:2px;display:flex">
					<div class="requireStar">{{$t('Header.form.requester')}}</div>
				</div>
				<el-input v-model="state.fileForm.requester" autocomplete="off" />
			</el-col>
		</el-row>
		<el-row style="margin-top:5px;">
			<el-col :span="24">
				<div style="margin-bottom:2px;display:flex">
					<div class="requireStar">{{$t('Header.form.vendor')}}</div>
				</div>
				<div style="display:flex;justify-content:space-between;">
					<div class="tags" style="width:100%;padding-left:5px;border:1px solid #c2c2c2">
						<el-tag v-for="tag in state.fileForm.vendorTags" :key="tag.id" closable :type="tag.type"
							@close="handleCloseTag(tag, 1)">
							{{tag.name}}
						</el-tag>
					</div>
	
					<el-button type="primary" @click="state.showSearchVendorDialog=true"
						style="margin-left:5px;width:120px">
						{{$t("Header.selectVendor")}}
					</el-button>
				</div>
			</el-col>
		</el-row>
	
		<!-- <el-row>
			<el-col span="24" class="tags">
				<div style="width:100%;display:flex;justify-content:space-between;">
					<div class="tags" style="width:100%;padding-left:5px;border:1px solid #c2c2c2">
						<el-tag
						  v-for="tag in state.fileForm.supplierTags"
						  :key="tag.id"
						  closable
						  :type="tag.type"
						  @close="handleCloseTag(tag, 2)">
						  {{tag.name}}
						</el-tag>
					</div>
					<el-button type="primary" @click="state.showImportLibraryDialog=true" style="margin-left:5px;width:80px">
					   {{$t("Header.importVendorLibrary")}}
					</el-button>
				</div>
			</el-col>			
		</el-row> -->
	
		<el-row style="margin-top:10px">
			<el-col :span="24">
				<el-table :data="state.selectedProductList" style="width: 100%" border max-height="350">
					<el-table-column :label="$t('Header.items.name')" prop="name" required>
						<template #header>
							{{$t('Header.items.name')}}<span style="color:red;margin-left:5px">*</span>
						</template>
						<template #default="scope">
							<el-input v-model="scope.row.product_name" :controls="false"
								style="width: 100%;"></el-input>
						</template>
					</el-table-column>
					<el-table-column :label="$t('Header.items.unit')" prop="unit">
						<template #header>
							{{$t('Header.items.unit')}}<span style="color:red;margin-left:5px">*</span>
						</template>
						<template #default="scope">
							<el-select v-model="scope.row.unit_id" :controls="false" style="width: 100%;">
								<el-option v-for="item in state.units" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column width="80" :label="$t('Header.items.qty')" prop="qty" class-name="column3">
						<template #header>
							{{$t('Header.items.qty')}}<span style="color:red;margin-left:5px">*</span>
						</template>
						<template #default="scope">
							<el-input-number v-model="scope.row.qty" :min="1" :controls="false"
								style="width: 100%;"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column :label="$t('Header.items.desc')" prop="desc">
						<template #default="scope">
							<el-input v-model="scope.row.description" :controls="false" style="width: 100%;"></el-input>
						</template>
					</el-table-column>
					<el-table-column :label="$t('Header.items.useFor')" prop="useFor">
						<template #default="scope">
							<el-input v-model="scope.row.use_for" :controls="false" style="width: 100%;"></el-input>
						</template>
					</el-table-column>
					<el-table-column :label="$t('Header.items.image')" prop="image" width="80">
						<template #header>
							{{$t('Header.items.image')}}<span style="color:red;margin-left:5px">*</span>
						</template>
						<template #default="scope">
							<self-upload-image mode="grid" :http-request="upoladRowFile" limit="1"
								style="width:100%;height:80px" :image-styles="{width:'60px',height:'60px'}"
								:filesList="scope.row.fileList" :data="scope.row" field="fileList"
								:before-remove="handleRowRemoveFile" @preview="preview" />
						</template>
					</el-table-column>
					<el-table-column :label="$t('Header.items.more')" prop="image" width="210">
						<template #default="scope">
							<self-upload-image mode="grid" :http-request="upoladRowFile" limit="3"
								style="width:100%;height:80px" :image-styles="{width:'60px',height:'60px'}"
								:filesList="scope.row.moreList" :data="scope.row" field="moreList"
								:before-remove="handleRowRemoveFile" @preview="preview" />
						</template>
					</el-table-column>
	
					<el-table-column width="50">
						<template #default="scope">
							<img src="@/assets/u126(2).svg" alt="" style="cursor: pointer;"
								@click="deleteInquireRow(scope.row)" />
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
	
		<div style="width:100;text-align:center;padding-top:20px">
			<el-button @click="addInquireRow" style="width:100px;height:26px">{{$t("common.New")}}</el-button>
		</div>
	
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showUploadInquireDialog = false"> {{ $t('common.cancel') }}</el-button>
				<el-button type="primary" @click="uploadInquiry">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</template>
	</el-dialog>
	
	<!-- 文件询价-->
	<el-dialog v-model="state.showUploadFileDialog" 
	     :close-on-click-modal="false"
		 :title="$t('Header.showUploadInquireTitle')" @open="loadQuotations"
		width="800px" @confirm="uploadQuotation" style="padding-left:10px;padding-right:10px">
		<el-form ref="ruleFormRef" :model="state.fileForm" :hide-required-asterisk="true" label-position="top"
			label-width="120px" :rules="state.accountRules">
			<el-form-item :label="$t('Header.fileForm.quotationName')" prop="quotationId" required>
				<template #label>
					<div class="requireStar">{{$t('Header.fileForm.quotationName')}}</div>
				</template>
				<el-select v-model="state.fileForm.quotationId" style="width:100%">
					<el-option v-for="item in state.quotationList" :key="item.id" :label="item.ref_no" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.vendor')" prop="vendorTags">
				<div style="width:100%;display:flex;justify-content:space-between;">
					<div class="tags" style="width:100%;padding-left:5px;border:1px solid #c2c2c2">
						<el-tag v-for="tag in state.fileForm.vendorTags" :key="tag.id" closable :type="tag.type"
							@close="handleCloseTag(tag, 1)">
							{{tag.name}}
						</el-tag>
					</div>
					<el-button type="primary" @click="state.showSearchVendorDialog=true"
						style="margin-left:5px;width:120px">
						{{$t("Header.selectVendor")}}
					</el-button>
				</div>
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.supplier')" prop="supplierTags">
				<div style="width:100%;display:flex;justify-content:space-between;">
					<div class="tags" style="width:100%;padding-left:5px;border:1px solid #c2c2c2">
						<el-tag v-for="tag in state.fileForm.supplierTags" :key="tag.id" closable :type="tag.type"
							@close="handleCloseTag(tag, 2)">
							{{tag.name}}
						</el-tag>
					</div>
					<el-button type="primary" @click="state.showImportLibraryDialog=true"
						style="margin-left:5px;width:120px">
						{{$t("Header.importVendorLibrary")}}
					</el-button>
				</div>
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.inquiryName')" prop="project_name" required>
				<template #label>
					<div class="requireStar">{{$t('Header.fileForm.inquiryName')}}</div>
				</template>
				<el-input v-model="state.fileForm.project_name" />
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.deadline')" prop="deadline" required>
				<template #label>
					<div class="requireStar">{{$t('Header.fileForm.deadline')}}</div>
				</template>
				<el-date-picker v-model="state.fileForm.deadline" :start="new Date()" type="date" placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.uploadFile')" required>
				<template #label>
					<div class="requireStar">{{$t('Header.fileForm.uploadFile')}}</div>
				</template>
				<self-upload-image mode="grid" :http-request="upoladFile" limit="1" style="width:100%;height:100px"
					:image-styles="{width:'80px',height:'80px'}" :filesList="state.fileList"
					:before-remove="handleRemoveFile" @preview="preview" />
			</el-form-item>
			<el-form-item :label="$t('Header.fileForm.description')">
				<el-input v-model="state.fileForm.description" type="textarea" :rows="4" />
			</el-form-item>
		</el-form>
	
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showUploadFileDialog = false"> {{ $t('common.cancel') }}</el-button>
				<el-button type="primary" @click="uploadQuotation">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</template>
	</el-dialog>
	
	<!-- 查询供应商-->
	<el-dialog v-model="state.showSearchVendorDialog" 
	    :close-on-click-modal="false"
	    :title="$t('Header.selectVendor')" width="960px">
		<div class="title">
			<div class="t_left"><span>{{ state.allTotal }}</span> {{ $t("Vendors.vendors") }}</div>
			<div class="t_right">
				<el-input type="text" id="search" :placeholder="$t('Vendors.placeholder')" v-model="state.vendorKeyword"
					@keyup.enter.native="searchVendor" />
				<img src="../assets/fangdajing.svg" alt="" @click="searchVendor" />
				<button @click="searchLibrary">{{ $t("Header.supplierBtn") }}</button>
				<!-- <button class="ad_search">Advanced Search</button> -->
			</div>
		</div>
		<div class="item-list" id="allTable" v-loading="state.vendorLoading">
			<el-table :data="state.supplierList" style="width: 100%;" border :row-class-name="tableRowClassName"
				v-el-table-infinite-scroll="loadVendorMore"
				:infinite-scroll-distance="20">
				<el-table-column class-name="column1" :label="''" width="45">
					<template #header>
						<input type="checkbox" v-model="checkAll" class="tui-checkbox" @click="headerClick" />
					</template>
					<template #default="scope">
						<input type="checkbox" v-model="scope.row.isCheck" @click="handleInqueryClick(scope.row)"
							class="tui-checkbox " />
					</template>
				</el-table-column>
	
				<el-table-column width="140" :label="$t('Header.vendor.name')" prop="company_abbreviation">
	
				</el-table-column>
				<el-table-column width="120" :label="$t('Header.vendor.contactor')" prop="contact_person">
	
				</el-table-column>
				<el-table-column width="120" :label="$t('Header.vendor.category')" prop="supplier_category">
	
				</el-table-column>
				<el-table-column :label="$t('Header.vendor.mainProducts')" prop="main_products">
	
				</el-table-column>
				<el-table-column width="100" :label="$t('Header.vendor.address')" prop="address">
					
					
	
				</el-table-column>
			</el-table>
		</div>
	
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.showSearchVendorDialog = false"> {{ $t('common.cancel') }}</el-button>
				<el-button type="primary" @click="confirmVendors">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</template>
	</el-dialog>
	
	<!-- 查询供应商库-->
	<el-dialog v-model="state.showImportLibraryDialog" 
	     :close-on-click-modal="false"
		 :title="state.showUploadInquireTitle" width="860px">
		<div class="title">
			<div class="t_left"><span>{{ state.allTotal }}</span> {{ $t("Header.searchVendorTitle") }}</div>
			<div class="t_right">
				<el-input type="text" id="search" :placeholder="$t('Vendors.placeholder')" v-model="state.keyword" />
				<button @click="toSearchMillionLibrary">{{ $t("Vendors.search") }}</button>
				<!-- <button class="ad_search">Advanced Search</button> -->
			</div>
		</div>
		<div class="item-list" id="allTable" v-loading="state.allListLoading" 
		  v-infinite-scroll="loadLibraryMore"
	      infinite-scroll-distance="1">
			<div class="item_bd" v-for="  item   in   state.allList  " :key="item.id">
				<div class="info_hd">
					<div class="hd_left">{{ item.company_abbreviation }}</div>
					<div class="hd_right"><span>{{ item.contact_person }}</span>{{ item.phone }}</div>
				</div>
				<div class="tab_address">
					
					<img src="@/assets/u18.svg" alt="" />
					{{ item.address }}
					
				</div>
				<ul class="products_info">
					<li class="main_products-box"><span>{{ $t("Vendors.mainProduct") }}</span><span
							class="main_products">{{
		              item.main_products }}</span></li>
					<li><span>{{ $t("Vendors.productCategory") }}</span>{{ item.supplier_category }}</li>
					<li><span>{{ $t("Vendors.registered_capital") }}</span><b> {{ item.registration_capital }}</b></li>
					<li><span>{{ $t("Vendors.certifiedTime") }}</span>{{ item.date_of_establishment }}</li>
				</ul>
				<img class="news_img" src="@/assets/u446.svg" alt="" />
				<img class="add_img" src="@/assets/u445.svg" alt="" @click="AddToMy(item)" />
			</div>
			
			<el-empty v-if="state.allList.length == 0" :description="$t('common.nodata')" />
	
	
			<!-- <el-pagination layout="prev, pager, next" :total="state.allTotal" style="margin-top: 20px;"
				@current-change="handleAllPageChange($event)" :page-size="20" /> -->
		</div>
	
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="state.showUploadInquireDialog = false">
					{{ $t('common.close') }}
				</el-button>
			</span>
		</template>
	</el-dialog>
	
	<!-- Import vendor library -->
	<el-dialog v-model="state.showImportLibraryDialog" 
	     :close-on-click-modal="false"
		 :title="$t('Vendors.MillionSupplierLibrary')" width="968px"
		align-center  class="vendor_dialog">
		<div class="tab-swiper container">
			<div class="swiper-box">
				<ul class="tab">
					<li :class="{ is_active: state.tabIndex == 0 }" @click="changeTab(0)">
						{{ $t("Vendors.Recommendation") }}
					</li>
					<li :class="{ is_active: state.tabIndex == 1 }" @click="changeTab(1)">
						{{ $t("Vendors.AllSuppliers") }}
					</li>
				</ul>
				<div class="swiper">
					<div class="content" :class="{ slider: state.tabIndex == 1 }">
						<div class="first-tab">
							<div class="title">
								<div>
									<span>{{ millionLibrarystate.recTotal }} </span>
									{{ $t("Vendors.vendors") }}
								</div> 
							    <div></div>
							</div>
							<div class="item-list"   infinite-scroll-immediate="false"
							    v-infinite-scroll="loadRecommSupplier"
							    infinite-scroll-distance="1">
								<div class="item_bd" v-for="  item   in   millionLibrarystate.recommendList  "
									:key="item.id">
									<div class="info_hd">
										<div class="hd_left">{{ item.company_abbreviation }}</div>
										<div class="hd_right"><span>{{ item.contact_person }}</span>{{ item.phone }}
										</div>
									</div>
									<div class="tab_address">
										
										<img src="@/assets/u18.svg" alt="" />
										{{ item.address }}
										
									</div>
									<ul class="products_info">
										<li class="main_products-box"><span> {{ $t("Vendors.mainProduct") }}</span><span
												class="main_products">{{
	                          item.main_products }}</span></li>
										<li><span>{{ $t("Vendors.productCategory") }}</span>{{ item.supplier_category }}
										</li>
										<li><span>{{ $t("Vendors.registered_capital") }}</span><b>
												{{ item.registration_capital }}</b></li>
										<li><span>{{ $t("Vendors.certifiedTime") }}</span>{{ item.date_of_establishment }}
										</li>
									</ul>
									<img class="news_img" src="@/assets/u446.svg" alt="" v-if="item.is_new" />
									<img class="add_img" src="@/assets/u445.svg" alt="" @click="AddToMy(item)" />
								</div>
								<el-empty v-if="millionLibrarystate.recommendList.length == 0" :description="$t('common.nodata')" />
							</div>
						</div>
						<div class="second_tab">
							<div class="title">
								<div class="t_left"><span>{{ millionLibrarystate.allTotal }}</span>
									{{ $t("Vendors.vendors") }}</div>
								<div class="t_right">
									<input type="text" id="search" :placeholder="$t('Vendors.placeholder')"
										v-model="millionLibrarystate.keyword"
										@keyup.enter.native="toSearchMillionLibrary" />
									<img src="../assets/fangdajing.svg" alt="" @click="toSearchMillionLibrary"/>
									<button @click="toSearchMillionLibrary">{{ $t("Vendors.search") }}</button>
									<!-- <button class="ad_search">Advanced Search</button> -->
								</div>
							</div>
							<div class="item-list" id="allTable"  infinite-scroll-immediate="false"
									v-infinite-scroll="loadLibraryMore"
									infinite-scroll-distance="1">
								<div class="item_bd" :class="item.checked?'active':''" v-for="  item   in   millionLibrarystate.allList  " :key="item.id">
									<div class="info_hd">
										<div class="hd_left">{{ item.company_abbreviation }}</div>
										<div class="hd_right"><span>{{ item.contact_person }}</span>{{ item.phone }}
										</div>
									</div>
									<div class="tab_address">
										
										<img src="@/assets/u18.svg" alt="" />
										{{ item.address }}
										
									</div>
									<ul class="products_info">
										<li class="main_products-box"><span>{{ $t("Vendors.mainProduct") }}</span><span
												class="main_products">{{
	                          item.main_products }}</span></li>
										<li><span>{{ $t("Vendors.productCategory") }}</span>{{ item.supplier_category }}
										</li>
										<li><span>{{ $t("Vendors.registered_capital") }}</span><b>
												{{ item.registration_capital }}</b></li>
										<li><span>{{ $t("Vendors.certifiedTime") }}</span>{{ item.date_of_establishment }}
										</li>
									</ul>
									<img class="news_img" src="@/assets/u446.svg" alt=""  v-if="item.is_new" />
									<img v-if="item.checked!=true" class="add_img" src="@/assets/u445.svg" alt="" @click="AddToMy(item)" />
								</div>
								<el-empty v-if="millionLibrarystate.allList.length == 0"
									:description="$t('common.nodata')" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
	
	<el-dialog v-model="centerDialogVisible"  :close-on-click-modal="false" :title="$t('Home.title')"
	  width="30%" align-center class="centerDialog" :show-close="false">
	  <div class="content">
	    <span style="margin-right:5px">{{ $t('Home.message') }} </span><span class="login" @click="login">{{ $t('Home.login') }}</span>
	  </div>
	  <template #footer>
	    <el-button @click="login">{{ $t('common.confirm') }}</el-button>
	  </template>
	</el-dialog>
	
	<ImageViewer :url="state.previewUrl" v-if="state.visible" @close="state.visible=false ">
	
	</ImageViewer>
	
</template>

<script lang="ts" setup>
	import { onMounted, reactive, ref, nextTick , computed } from "vue";
	import { useRoute, useRouter } from "vue-router";
	import { request } from "@/api/api";
	import { QuotationsApi } from "@/api/quotationsApi";
	import { SupplierApi } from "@/api/supplierApi";
	import { Common } from "@/api/common";
	import moment from "moment";
	import VueCookies from "vue-cookies";

	import { mainStore } from "@/store/index";
	import { storeToRefs } from "pinia";
	import i18n from "@/lang/index";
	
	import sys_logo from "@/assets/images/logo.png";
	import moreIcon from "@/assets/svg/u143.svg";
	import fileIcon from "@/assets/svg/u148.svg";
	import inqueryIcon from "@/assets/svg/u147.svg";
	import { ElMessage } from "element-plus";

	const useMainStore = mainStore();	
	const router = useRouter();
	
	const {
		membershipLevel,
		userName,
		memberRemainingDate,
		login,
		requirementCount,
		purchasePlanCount,
		quotationCount,
		historyLogCount,
		orderCount,
		accountCount,
		shipmentPlanCount,
		shipmentsCount,
		mySupplierCount,
		warehouseCount,
		afterserviceCount,
		membershipStart,
		membershipStop,
		email,
		shopCartNum,
		supplier_url,
		logo,
		menuShow,
		avatar,
		site,
		company,
        memberType
	} = storeToRefs(useMainStore);
	
	const t = i18n.global.t;
	const lang = ref('en_US')
	
	const state = reactive({
		lang: VueCookies.get("frontend_lang")=="zh_CN",
		visible: false,
		name:'',
		phone:'',
		email:'',
		company:'',
		content:'',
		firstMenu: [{
			title: t("index.product"),
			active: false,
			id: 'products'
		}, {
			title: t("index.catalog"),
			active: false,
			id: 'catalog'
		}, {
			title: t("index.contactUs"),
			active: true,
			id: 'contact'
		}
		],
		secondMenu: [{
			title: t("index.buyer_portal"),
			active: false,
			id: 'buyer'
		}, {
			icon: moreIcon,
			isImage: true,
			id: 'more',
			children: [{
				icon: fileIcon,				
				id: 'file',
				title: i18n.global.t("Header.fileInquireTitle")
			}, {
				icon: inqueryIcon,
				id: 'inquery',				
				title: i18n.global.t("Header.productInquireTitle")
			}]
		}],
		user:{},
	
		
		inquery: {
		
			requesterTags: []
		},
		
		showUploadInquireDialog: false,
		form: {},
		productCount: 1,
		vendors: [],
		selectedProductList: [],
		
		fileList: [],
		units: [],
		showUploadFileDialog: false,
		fileForm: {
			vendorTags: [],
			supplierTags: [],
			property: '',
			requester: '',
		},
		showQuotation: false,
		quotationList: [],
		
		vendorLoading: false,
		vendorKeyword: '',
		showSearchVendorDialog: false,
		vendorPage: 0,
		vendorDisabled: false,
		
		supplierList: [],
		vendorList: [],
		vendorTags: [],
		supplierTags: [],
		
		page: 0,
		allList: [],
		showImportLibraryDialog: false,
		previewUrl: '',
		tabIndex: 0,
		logo:"",
		
		isShowTooltip:false,
		isShowTooltip2:false,
		isShowTooltip3:false
	});
	
	const inquireForm =ref();
	
	logo.value='https://comesoon.com/web/content/1583831?download=true';
	avatar.value="";
	
	
	request("/api/user/info", {}, "get")
		.then((res : any) => {
			const data = res.data.data;
			membershipLevel.value = data.membership_level;
			userName.value = data.name;
			memberRemainingDate.value = data.member_remaining_date;
			login.value = data.login;
			requirementCount.value = data.menu_num.requirement_num;
			purchasePlanCount.value = data.menu_num.plan_num;
			quotationCount.value = data.menu_num.pi_num;
			orderCount.value = data.menu_num.po_num;
			accountCount.value = data.menu_num.company_account_num;
			historyLogCount.value = data.menu_num.history_logs_num;
			warehouseCount.value = data.menu_num.warehouse_num;
			shipmentPlanCount.value = data.menu_num.shipment_plan_num;
			shipmentsCount.value = data.menu_num.shipment_num;
			// mySupplierCount.value = data.menu_num.requirement_num;
			afterserviceCount.value = data.menu_num.afters_service_num;
			membershipStart.value = data.membership_start;
			membershipStop.value = data.membership_stop;
			email.value = data.email;
			site.value = data.site;
			supplier_url.value = data.supplier_url;
			logo.value = data.logo;
			
			company.value=data.company_name;
			avatar.value=data.image_url;
			memberType.value=data.member_type;
	
			sessionStorage.setItem("userInfo", JSON.stringify(data));
			
			if (site.value!='Thailand'){
				state.firstMenu = [{
					title: t("index.product"),
					active: false,
					id: 'products'
				}, {
					title: t("index.catalog"),
					active: false,
					id: 'catalog'
				}, {
					title: t("index.groupBuying"),
					active: false,
					id: 'group'
				}, {
					title: t("index.contactUs"),
					active: true,
					id: 'contact'
				}];
			}
			
			if (supplier_url.value){
				state.secondMenu = [{
					title: t("index.buyer_portal"),
					active: false,
					id: 'buyer'
				}, {
					title: i18n.global.t("index.supplier_portal"),					
					active: false,
					id: 'supplier'
				}, {
					icon: moreIcon,
					isImage: true,
					id: 'more',
					children: [{
						icon: fileIcon,				
						id: 'file',
						title: i18n.global.t("Header.fileInquireTitle")
					}, {
						icon: inqueryIcon,
						id: 'inquery',				
						title: i18n.global.t("Header.productInquireTitle")
					}]
				}];
			}
			//test
			
	}).catch((e) => {
			login.value=0;
			userName.value="";
			
			sessionStorage.setItem("userInfo", "{login:0}");
	});
		
	// 获取购车总数量
	request("/api/shop/cart/num", {}, "get").then((res : any) => {
		if (res.data.status == 200) {
			shopCartNum.value = res.data.data;
		}
	});
	
	
	Common.getUnits().then((res : any) => {
		
		state.units = res.data.data;
		
	})

	function getCookie(name : string) {
		const prefix = name + "=";
		const start = document.cookie.indexOf(prefix);

		if (start == -1) {
			return null;
		}

		let end = document.cookie.indexOf(";", start + prefix.length);
		if (end == -1) {
			end = document.cookie.length;
		}

		const value = document.cookie.substring(start + prefix.length, end);
		return unescape(value);
	}
	
	const showToast=(message)=>{
		ElMessage({
			type: "error",
			message: message,
		})
	}
	
	const showSuccess=(message)=>{
		ElMessage.success(message);
	}
	
	const isEmail = (s) =>{
		return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(s)
	} 
	
	const confirm=()=>{
		if (!state.name){
			showToast(t("index.invalidNameTip"))
			return;
		}
		if (!state.phone){
			showToast(t("index.invalidPhoneTip"))
			return;
		}
		if (!state.email){
			showToast(t("index.invalidEmailTip"))
			return;
		}
		if (!isEmail(state.email)){
			showToast(t("index.invalidEmailFormatTip"))
			return;
		}
		if (!state.company){
			showToast(t("index.invalidCompanyTip"))
			return;
		}
		if (!state.content){
			showToast(t("index.invalidMessageTip"))
			return;
		}
		
		
		
		let params= new FormData()
		params.append("name", state.name);
		params.append("email", state.email);
		params.append("phone", state.phone);
		params.append("company", state.company);
		params.append("message", state.content);
		
		
		
		// 获取购车总数量
		request("/api/buyer/v1/contact/info/save", params, "post").then((res : any) => {
			if (res.data.status == 200) {
				state.visible=false;
				showSuccess(t("index.success"));
			}else{
				showToast(t("index.fail"));
			}
		}).catch((res)=>{
			showToast(t("index.fail"));
		})
	}
	
	const menuClick=(e)=>{
	
		if (e.detail.value=="logo"){
			window.open("/my/buyer");
		}else if (e.detail.value=="logout"){
			window.location.href="/web/session/logout?redirect=/buyer/login";
		}else if (e.detail.value=="sign"){
			window.location.href = `/buyer/login?redirect=${location.pathname}${location.hash}`;
		}else if (e.detail.value=="register"){
			window.location.href = `/buyer/register?redirect=${location.pathname}${location.hash}`;
		}else if (e.detail.value=="products"){
			window.open("/my/shop");
		}else if (e.detail.value=="catalog"){
			window.open("/my/buyer/#/Catalog");
		}else if (e.detail.value=="group"){
			window.open("/my/buyer/#/GroupBuying");
		}else if (e.detail.value=="contact"){
			window.open("/contact");
		}else if (e.detail.value=="buyer"){
            if(!memberType.value){
                ElMessage.warning(t("index.accountPending"));
                return
            }
			window.open("/my/buyer");
		}else if (e.detail.value=="supplier"){
			window.open(supplier_url.value);
		}else if (e.detail.type=="lang"){
			confirmLanguage(e.detail.value);
		}else if (e.detail.value=="cart"){
			window.open("/my/shop/#/shoppingCart");			
		}else if (e.detail.value=="info"){
			window.location.href="/my/buyer/#/MyProfile"
		}else if (e.detail.value=="profile"){
			window.location.href="/my/buyer/#/MyProfile"
		}else if (e.detail.value=="message"){
			window.open("/my/shop/#/message/quotation/product");
		}else if (e.detail.value=="file"){
			window.location="/my/buyer/#/?openwindow=file_inquire"
			/* state.selectedProductList = [];
			state.fileForm = {
				vendorTags: [],
				supplierTags: []
			}
			addInquireRow();
			state.showUploadInquireDialog = true; */
		}else if (e.detail.value=="inquery"){
			window.location="/my/buyer/#/?openwindow=product_inquire"
			/* state.fileForm = {
				vendorTags: [],
				supplierTags: []
			}
			state.fileList = [];
			state.showUploadFileDialog = true; */
		}
	}
	
	
	const confirmLanguage = (language: any) => {
	    // document.getElementById("jumOptions")!.style.width = "700px";
	   // selectLanguage.value = icon;
	    const redirect = {
	       url: encodeURIComponent(
	          location.pathname.replace(/[&?]edit_translations[^&?]+/, "")
	        ),
	        hash: encodeURIComponent(window.location.hash),
	    };
	    VueCookies.set("frontend_lang", language);
	    window.location.href = `/api/website/lang/${language}?r=${redirect.url}${redirect.hash}`;
	
	  // $root.$i18n.locale
	};
	
	const loadQuotations = () => {
		state.quotationList = [];
		QuotationsApi.quotationsList({
			order_ref: 1
		}).then((res) => {
			
			state.quotationList = res.data.result.data;
			
			
		});
	}
	
	const searchVendor = () => {
		state.vendorPage = 0;
		state.vendorDisabled = false;
		state.supplierList = [];
	
		loadVendorMore();
	}
	
	const loadVendorMore = () => {
		if (state.vendorDisabled) {
			/* ElMessage({
				type: 'info',
				message: i18n.global.t("common.noMoreData"),
			}) */
	
			return;
		}
	
		const loading = ElLoading.service({
			lock: true,
			text: i18n.global.t('catalog.loading'),
			background: 'rgba(0, 0, 0, 0.7)',
		})
		
		state.vendorPage = state.vendorPage + 1;
		//state.vendorLoading = true;
		let params : any = {
			page: state.vendorPage,
			search: state.vendorKeyword
		}
	
		SupplierApi.supplierList(params).then((res) => {
			
			state.supplierList = [...state.supplierList, ...res.data.result.data.data];
			
			
			state.vendorTotal = res.data.result.data.total;
			
			
			//state.vendorLoading = false;
	
			state.showQuotation = true;
			
			loading.close();
	
			state.vendorDisabled = state.supplierList.length >= state.vendorTotal;
		});
	}
	
	const confirmVendors = async () => {
	
		state.supplierList.forEach((item) => {
			if (item.isCheck) {
				let flag = false;
				for (let i = 0; i < state.fileForm.vendorTags.length; i++) {
					if (state.fileForm.vendorTags[i].id == item.id) {
						flag = true;
					}
				}
	
				if (!flag) {
					state.fileForm.vendorTags.push({
						id: item.id,
						name: item.company_abbreviation
					});
				}
			}
		});
	
		state.showSearchVendorDialog = false
	}
	
	const headerClick = (e : any) => {
		e.cancelBubble = true;
	};
	
	const handleInqueryClick = (item) => {
		item.isCheck = !item.isCheck;
	}
	
	// 通过计算属性监听checkbox数据的 控制表头的全选与反选
	const checkAll = computed({
		get() {
			const isAll = state.supplierList.some((i) => {
				return !i.isCheck;
			});
	
			return !isAll;
		},
	
		set(isCheck) {
	
			state.supplierList.forEach((t) => {
				t.isCheck = isCheck;
			});
		},
	});
	
	
	// 控制复选框之后的行颜色
	const tableRowClassName = ({ row, rowIndex } : Row) => {
		return row.isCheck ? "rowBackground" : "";
	};
	
	const handleCloseTag = (tag, index) => {
		if (index == 1) {
			for (let i = 0; i < state.fileForm.vendorTags.length; i++) {
				if (state.fileForm.vendorTags[i].id == tag.id) {
					state.fileForm.vendorTags.splice(i, 1);
					break;
				}
			}
		} else {
			for (let i = 0; i < state.fileForm.supplierTags.length; i++) {
				if (state.fileForm.supplierTags[i].id == tag.id) {
					state.fileForm.supplierTags.splice(i, 1);
					break;
				}
			}
		}
	}
	
	const addInquireRow = () => {
		state.productCount = state.productCount + 1,
			state.selectedProductList.push({
				index: state.productCount,
				fileList: [],
				moreList: []
			});
	}
	
	const deleteInquireRow = async (row) => {
		for (let i = 0; i < state.selectedProductList.length; i++) {
			if (state.selectedProductList[i].index == row.index) {
				let item = state.selectedProductList[i];
				for (let k = 0; k < item.fileList.length; i++) {
					await handleRemoveFile({
						id: item.fileList[k].id
					}, true)
				}
				for (let k = 0; k < item.moreList.length; i++) {
					await handleRemoveFile({
						id: item.moreList[k].id
					}, true)
				}
				state.selectedProductList.splice(i, 1);
				break;
			}
		}
	}
	
	const upoladFile = (params : any) => {
		const { file } = params;
		let formData = new FormData();
		formData.append('file', file);
		formData.append('type', 'main_img');
		Common.uploadFile(formData).then((res : any) => {
			
			state.fileList[state.fileList.length - 1].id = res.data.result.data.id;
			
			
		})
	}
	
	const handleRemoveFile = async (file : any) => {
		if (!file.raw) {
			return true;
		} else {
			return true;
		}
	}
	
	
	const upoladRowFile = (params : any) => {
		const { file, data, field } = params;
		let formData = new FormData();
		formData.append('file', file);
		formData.append('type', 'main_img');
	
		Common.uploadFile(formData).then((res : any) => {
			
			if (field == "fileList") {
				data.fileList[data.fileList.length - 1].id = res.data.result.data.id;
				
				
			} else {
				data.moreList[data.moreList.length - 1].id = res.data.result.data.id;
				
				
			}
		})
	}
	
	const handleRowRemoveFile = async (file : any) => {
		if (!file.raw) {
			return true;
		} else {
			return true;
		}
	}
	
	const uploadInquiry = async () => {
	
		let supplier_ids = [];
		state.fileForm.vendorTags.forEach((item) => {
			supplier_ids.push(item.id);
		});
		state.fileForm.supplierTags.forEach((item) => {
			supplier_ids.push(item.id);
		})
		let params = {
			property: state.fileForm.property,
			requester: state.fileForm.requester,
			supplier_ids: JSON.stringify(supplier_ids)
		}
	
		if (!params.property) {
			showToast(i18n.global.t("Header.enterPropertyTip"));
			return;
		}
		if (!params.requester) {
			showToast(i18n.global.t("Header.enterRequesterTip"));
			return;
		}
		if (supplier_ids.length == 0) {
			showToast(i18n.global.t("Header.selectSupplierTip"));
			return;
		}
	
		let product_data = [];
	
		let flag = false;
		for (let i = 0; i < state.selectedProductList.length; i++) {
			let item = state.selectedProductList[i];
	
			if (!item.product_name) {
				flag = true;
				showToast(i18n.global.t("Header.enterProductNameTip"));
				break;
			}
			if (!item.unit_id) {
				flag = true;
				showToast(i18n.global.t("Header.selectUnitTip"));
				break;
			}
			if (!item.qty) {
				flag = true;
				showToast(i18n.global.t("Header.enterQtyTip"));
				break;
			}
			if (item.fileList.length == 0) {
				flag = true;
				showToast(i18n.global.t("Header.selectMainPictureTip"));
				break;
			}
	
			let row = {
				product_name: item.product_name,
				unit_id: item.unit_id,
				qty: item.qty,
				description: item.description,
				use_for: item.use_for,
				picture_id: item.fileList[0].id
			}
	
			row.mul_pictures_ids = [];
	
			item.moreList.forEach((data) => {
				row.mul_pictures_ids.push(data.id);
				
			})
	
			product_data.push(row);
		}
	
		if (flag) {
			return;
		}
	
		if (product_data.length == 0) {
			showToast(i18n.global.t("Header.enterProductTip"));
			return;
		}
	
		params.productData = JSON.stringify(product_data);
	
		const loading = ElLoading.service({
			lock: true,
			text: i18n.global.t('catalog.loading'),
			background: 'rgba(0, 0, 0, 0.7)',
		})
	
		try{
			let res = await QuotationsApi.uploadInquiry(params);
			
			if (res.status == 200) {
				
				ElMessage({
					type: 'success',
					message: i18n.global.t("common.upload")
				});
	
				loading.close();
	
				state.showUploadInquireDialog = false;
			} else {
				ElMessage({
					type: 'error',
					message: res.data.message
					
				})
				loading.close();
			}
		}catch(e){
			loading.close();
		}
	}
	
	const uploadQuotation = async () => {
	
		let supplier_ids = {};
		state.fileForm.vendorTags.forEach((item) => {
			supplier_ids[String(item.id)] = item.name;
		})
	
		state.fileForm.supplierTags.forEach((item) => {
			supplier_ids[String(item.id)] = item.name;
		})
	
		state.fileForm.fileId = 0;
	
		if (state.fileList.length > 0) {
			state.fileForm.fileId = state.fileList[0].id
		}
		let params = {
			qt: state.fileForm.quotationId,
			description: state.fileForm.description,
			project_name: state.fileForm.project_name,
			date_deadline: moment(state.fileForm.deadline).format("YYYY-MM-DD"),
			supplier_id: JSON.stringify(supplier_ids),
			supplier_file: state.fileForm.fileId
		}
	
		if (!params.qt) {
			showToast(i18n.global.t("Header.selectQuotationTip"));
			return;
		}
		if (!params.project_name) {
			showToast(i18n.global.t("Header.enterInquireNameTip"));
			return;
		}
		if (!params.date_deadline) {
			showToast(i18n.global.t("Header.selectDeadlineTip"));
			return;
		}
		if (!params.supplier_file) {
			showToast(i18n.global.t("Header.uploadFileTip"));
			return;
		}
	
		const loading = ElLoading.service({
			lock: true,
			text: i18n.global.t('catalog.loading'),
			background: 'rgba(0, 0, 0, 0.7)',
		})
	
		try{
			let res = await QuotationsApi.uploadQuotation(params);
			
			if (res.status == 200) {
				
				ElMessage({
					type: 'success',
					message: i18n.global.t("Header.inquireUploadSuccess")
				});
				
				millionLibrarystate.recommendList=[];
				millionLibrarystate.allList=[];
	
				loading.close();
				state.showUploadFileDialog = false;
			} else {
				loading.close();
				ElMessage({
					type: 'error',
					message: res.data.message
					
				})
				state.showUploadFileDialog = false;
			}
		}catch(e){
			loading.close();
		}
	}
	
	const changeTab=(index)=>{
		state.tabIndex = index;
		
		if (index==1 && millionLibrarystate.allList.length==0){
			nextTick(()=>{				
				toSearchMillionLibrary();
			})
		}
	}
	
	const  searchLibrary=()=>{
		if (millionLibrarystate.recommendList.length==0){
			searchRecommSupplier();
		}
		state.tabIndex=0;
		state.showImportLibraryDialog=true
	}
	
	const millionLibrarystate = reactive({
		page: 0,
		recPage: 0,
		
		recTotal:0,
		total: 0,
		
		allTotal: 0,
		recommendList: [],
		allList: [],
		keyword: '',
		allListLoading: false,
		recListLoading: false,
		
		recDisabled:false,
		disabled:false
	} as any)
	
	const searchRecommSupplier=async ()=>{
		millionLibrarystate.recDisabled=false;
		millionLibrarystate.recPage=0;
		millionLibrarystate.recommendList=[];
		await loadRecommSupplier();
	}
	
	const loadRecommSupplier = async () => {
		if (millionLibrarystate.recDisabled){
			return;
		}
		
		const loading = ElLoading.service({
			lock: true,
			customClass: "loadingClass",
			text: i18n.global.t('catalog.loading'),
			background: 'rgba(0, 0, 0, 0.7)',
		})
		
		//millionLibrarystate.allListLoading = true;
		//millionLibrarystate.recListLoading = true;
		millionLibrarystate.recPage=millionLibrarystate.recPage+1;
		
		let params1 : any = {
			page: millionLibrarystate.recPage,
			supplier_type: 'recommendation'
		}
		await SupplierApi.supplierList(params1).then((res : any) => {
			
			millionLibrarystate.recommendList = [...millionLibrarystate.recommendList, ...res.data.result.data.data];
			
			
			millionLibrarystate.recTotal = res.data.result.data.total;
			
			loading.close();
			//millionLibrarystate.recListLoading = false;
			
			millionLibrarystate.recDisabled=millionLibrarystate.recommendList.length>=millionLibrarystate.recTotal;
		})
		/* let params2 : any = {
			page: 1,
			supplier_type: 'all_suppliers'
		}
		SupplierApi.supplierList(params2).then((res : any) => {
			
			millionLibrarystate.allList = res.data.result.data.data;
			
			
			millionLibrarystate.allTotal = res.data.result.data.total;
			
			
			millionLibrarystate.allListLoading = false;
	
		}) */
	}
	
	const toSearchMillionLibrary =async () => {
		
		millionLibrarystate.allListLoading = false;
		millionLibrarystate.page=0;
		millionLibrarystate.disabled=false;
		millionLibrarystate.allList=[];
		
		await loadLibraryMore();
		
		/* let params2 : any = {
			page: millionLibrarystate.page,
			supplier_type: 'all_suppliers',
			search: millionLibrarystate.keyword
		}
		SupplierApi.supplierList(params2).then((res : any) => {
			
			millionLibrarystate.allList = [...millionLibrarystate.allList, ...res.data.result.data.data];
			
			
			millionLibrarystate.allTotal = res.data.result.data.total;
			
			
			millionLibrarystate.allListLoading = false;
			
			millionLibrarystate.disabled=millionLibrarystate.allList.length>=millionLibrarystate.allTotal;
		}) */
	}
	
	const loadLibraryMore = async () => {
		if (millionLibrarystate.disabled){
			return;
		}
		
		const loading = ElLoading.service({
			lock: true,
			customClass: "loadingClass",
			text: i18n.global.t('catalog.loading'),
			background: 'rgba(0, 0, 0, 0.7)',
		})
		
		millionLibrarystate.page=millionLibrarystate.page+1;
		//millionLibrarystate.allListLoading = true;
		let params2 : any = {
			page: millionLibrarystate.page,
			supplier_type: 'all_suppliers',
			search: millionLibrarystate.keyword
		}
		await SupplierApi.supplierList(params2).then((res : any) => {
			
			millionLibrarystate.allList = [...millionLibrarystate.allList, ...res.data.result.data.data];
			
			
			millionLibrarystate.allTotal = res.data.result.data.total;
			
			
			//millionLibrarystate.allListLoading = false;
			
			loading.close();
			
	        millionLibrarystate.disabled=millionLibrarystate.allList.length>=millionLibrarystate.allTotal;
		})
	};
	
	const AddToMy = async (item : any) => {
		/* await SupplierApi.addVendorToMy({
		  supplier_ids: JSON.stringify([item.id])
		})
		ElMessage({
		  message: i18n.global.t('common.add'),
		  grouping: true,
		  type: 'success',
		}); */
		
		if (state.showSearchVendorDialog){
			let flag = false;
			for (let i = 0; i < state.fileForm.vendorTags.length; i++) {
				if (state.fileForm.vendorTags[i].id == item.id) {
					flag = true;
					break;
				}
			}
			if (!flag) {
				item.checked=true;				
				showSuccess(i18n.global.t("common.add"));
				state.fileForm.vendorTags.push({
					id: item.id,
					name: item.company_abbreviation
				});
			}
		}else{		
	
			let flag = false;
			for (let i = 0; i < state.fileForm.supplierTags.length; i++) {
				if (state.fileForm.supplierTags[i].id == item.id) {
					flag = true;
					break;
				}
			}
			if (!flag) {
				item.checked=true;
				showSuccess(i18n.global.t("common.add"));
				state.fileForm.supplierTags.push({
					id: item.id,
					name: item.company_abbreviation
				});
			}
		}
	}
	
	const preview = (url) => {
		state.previewUrl = url;
		state.visible = true;
	}

	onMounted(() => {
		state.lang = VueCookies.get("frontend_lang");//getCookie("frontend_lang") || 'en_US';
	})
</script>

<style lang="less" scoped>
	.home{
		width: 100%;
		margin-bottom: 50px;
		
		.banner{
			width: 100%;
			height: 316px;
			position: relative;			
			display:flex;
			align-items: center;
			justify-content: center;
			
			.bg{
				position: absolute;
				top: 0px;
				left: 0px;
				width:100%;
				height: 316px;
			}
			
			.info{				
				object-fit: contain;
				width: 277px;
				height: 73px;
				z-index: 1;
			}
		}
		
		.middle{			
			width: 100%;
			margin-top: 30px;
			display:flex;
			align-items: center;
			justify-content: center;
			
			.content{
				width: 1140px;
				height: 3.0rem;
				background: inherit;
				background-color: rgba(242, 247, 247, 1);
				border: none;
				border-radius: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				
				.item{
					width: 895px;
					height: 289px;
					display: flex;
					background-color: #fff;
					margin-top: 20px;
					align-items: center;
					justify-content: center;
					position: relative;
					margin-bottom: 40px;
					border-radius: 5px;
					border-width: 1px;
					border-style: solid;
					border-color: #fff;
					
					&:hover{
						box-sizing: border-box;
						border-width: 1px;
						border-style: solid;
						border-color: rgba(227, 224, 224, 1);
						-moz-box-shadow: none;
						-webkit-box-shadow: none;
						box-shadow: none;
							
						.img{
							filter: none;
						}
						
						.info .position .img{
							filter: none;
						}
						
						.info .title .text{
							color: rgb(205, 62, 45);
						}
					}
					
					.img{
						width:256px;
						height:256px;
						object-fit: contain;
						position: absolute;
						top: 15px;
						left: 50px;
						
						filter: grayscale(100%);
					}
					
					.info{						
						position: absolute;			
						left: 40%;
						width: 60%;
						height:100%;
						padding:5px;
						display:flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						
						.title{							
							position: absolute;		
							top: 40px;
							left: 0px;
							
							.text{
								font-family: 'Merriweather', sans-serif;
								font-weight: 400;
								font-style: normal;
								font-size: 20px;
								color: #333333;    
								text-align: left;
								line-height: 25px;
							}
						}
						
						.position{
							display: flex;
							justify-content: left;
							
							.img{
								width: 20px;
								height: 20px;
								object-fit: contain;
								display:flex;
								position: relative;
								left: 0px;
								top: 0px;
								filter: grayscale(100%);
								
								margin-right: 5px;
							}
							
							.text{
								font-family: 'Arial Normal', 'Arial', sans-serif;
								font-weight: 400;
								font-style: normal;
								color: #7F7F7F;
								text-align: left;
								line-height: 25px;								
								font-size: 13px;
								display:flex;
								width: 505px;
							}
						}
					}
				}
				
				.contact{
					display:flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20px;
					
					.divide{
						width: 130px;
					}
					
					.span{
						display:flex;
						align-items: center;
					
						.img{
							width: 30px;
							height: 30px;
							object-fit: contain;
							margin-right: 15px;
						}
						
						.tel{
							font-size: 16px;
							color: rgba(77, 77, 77, 0.996078431372549);
							text-align: left;
							line-height: 25px;
							font-family: 'Arial Normal', 'Arial', sans-serif;
							font-weight: 400;
							font-style: normal;
						}
						
						.email{
							color: #034591;
							line-height: 25px;
							font-size: 14px;
							text-align: left;
							line-height: 25px;
							font-family: 'Arial Normal', 'Arial', sans-serif;
							font-weight: 400;
							font-style: normal;
						}
					}
				}
				
				.button_panel{
					margin-top: 50px;
					
					.btn{
						width: 211px;
						height: 60px;
						background: inherit;
						background-color: rgba(209, 46, 34, 1);
						box-sizing: border-box;
						border-width: 1px;
						border-style: solid;
						border-color: rgba(249, 73, 73, 1);
						border-radius: 50px;
						-moz-box-shadow: none;
						-webkit-box-shadow: none;
						box-shadow: none;
						color: #FFFFFF;
						text-align: center;						
						font-size: 16px;
						
						&:hover{						
							background-color: rgba(153, 33, 17, 1);
						}
					}
				}
			}
		}
	}
	
	.message{
		.send{
			width: 150px;
			height: 50px;
			background: inherit;
			background-color: rgba(205, 62, 45, 1);
			border: none;
			border-radius: 50px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			
			color: #fff;
			font-family: 'Arial Normal', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 13px;
			letter-spacing: normal;
			
			margin-right: 50px;
		}
		
		.cancel{
			width: 150px;
			height: 50px;
			background: inherit;
			background-color: rgb(239, 239, 239);
			border: none;
			border-radius: 50px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
			
			color: #000;
			font-family: 'Arial Normal', 'Arial', sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 13px;
			letter-spacing: normal;
			
			margin-right: 30px;
		}
		
		.content{
			width: 100%;
			margin-top: 40px;
			
			.item{
				display:flex;
				width: 100%;
				align-items: center;
				margin-top: 20px;
				padding-left: 10px;
				
				.label{
					width: 220px;
					font-family: 'Arial Normal', 'Arial', sans-serif;
					font-weight: 400;
					font-style: normal;
					letter-spacing: normal;
					font-size: 14px;
					color: #7F7F7F;
					text-align: left;					
					line-height: 25px;
					
					.red{
						margin-left: 5px;
						color: #A30014;
					}
				}
				
				
				.text{
					width: calc(100% - 30px);
					
					input{
						width: 95%;
						height: 36px;
						padding: 2px 2px 2px 2px;
						font-family: 'Arial Normal', 'Arial', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 13px;
						letter-spacing: normal;
						color: rgb(153, 153, 153);
						vertical-align: none;
						text-align: left;
						text-transform: none;
						background-color: transparent;
						border-color: transparent;		
						outline: none;
						
						
						background-color: rgba(255, 255, 255, 1);
						box-sizing: border-box;
						border-width: 1px;
						border-style: solid;
						border-color: rgba(210, 209, 209, 1);
						border-radius: 0px;
						margin-bottom: 15px;
					}
					
					textarea{
						width: 95%;
						height: 100px;
						padding: 2px 2px 2px 2px;
						font-family: 'Arial Normal', 'Arial', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 13px;
						letter-spacing: normal;
						color: rgb(153, 153, 153);
						vertical-align: none;
						text-align: left;
						text-transform: none;
						background-color: transparent;
						border-color: transparent;		
						outline: none;
						
						resize: none;
						
						background-color: rgba(255, 255, 255, 1);
						box-sizing: border-box;
						border-width: 1px;
						border-style: solid;
						border-color: rgba(210, 209, 209, 1);
						border-radius: 0px;
					}
				}
			}
		}
	}
	
		
	.active {
		display: none;
	}
	
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		.search {
			width: 266px;
			height: 42px;
			padding: 2px 2px 10px 2px;
			background-color: #fff;
			font-weight: 400;
			font-style: normal;
			font-size: 13px;
			padding: 2px 30px 2px 8px;
			color: #797979;
			border: 1px solid #f2f2f2;
			border-radius: 5px;
			margin-right: 15px;
			background: url("@/assets/fangdajing.svg") no-repeat 95% center;
	
			&:focus {
				border: 1px solid #797979;
			}
		}
	
		button {
			width: 70px;
			height: 40px;
			border-radius: 5px;
			background-color: #169bd5;
			color: #fff;
		}
	
		.ad_search {
			width: 120px;
			background-color: #df2c20;
			margin-left: 8px;
		}
	
		.t_right {
			width: 400px;
			position: relative;
			display: flex;
			justify-content: space-between;
	
			button {
				margin-left: 5px;
				width: 120px;
			}
	
			img {
				position: absolute;
				top: 10px;
				right: 100px;
				height:20px;
				width:20px;
				cursor: pointer;
			}
		}
	}
	
	.item-list {
		margin-top: 5px;
	
		.column1 {
			.tui-checkbox {
				width: 20px;
				height: 20px;
	
				&:checked::after {
					top: 5px;
					left: 3px;
				}
			}
	
			.bd_checkbox {
				position: absolute;
				top: 5px;
				left: 15px;
			}
	
			.numbering {
				font-family: "Microsoft YaHei", sans-serif;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #409eff;
				margin: 20px 5px 0;
				cursor: pointer;
			}
	
			.cell {
				padding-top: 14px;
			}
		}
	}
	
	.rowBackground {
		background-color: #f2f2f2;
	}
	
	.vendor_dialog {
		.container {
			width: 100%;
			max-width: 1220px;
			margin: 0 auto;
		}
	
		/* tab导航 开始 */
		.tab-swiper {
			.swiper-box {
				// height: 736px;
	
				.tab {
					height: 32px;
					display: flex;
					flex-wrap: nowrap;
					padding:10px;
	
					li {
						float: left;
						padding: 0 25px 5px;
						font-size: 16px;
						color: #34364e;
						margin-right: 20px;
						font-weight: 400;
						z-index: 1;
	
						&:last-child {
							margin-right: 0;
						}
	
						&:hover {
							cursor: pointer;
						}
	
						span {
							font-family: "Impact Normal", "Impact", sans-serif;
						}
					}
	
					.is_active {
						font-weight: 700;
						color: #409eff;
						font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
	
						span {
							color: #409eff;
							font-weight: 400;
						}
					}
				}
	
				.swiper {
					width: 100%;
					background: #fff;
					margin-top: 20px;
					border-radius: 5px;
					overflow: hidden; // 让超出边框的部分隐藏
	
					.content {
						width: 200%; // 总宽设成x倍内容的宽度
						transition: all 0.5s; // 左右平滑滚动切换，动画为0.5s
						-webkit-transform: translateX(0);
						transform: translateX(0); // 进入页面时显示tab1内容
	
						.first-tab,
						.second_tab {
							float: left;
							width: 50%;
							padding: 15px 5px;
	
	
							.t_right {
								display: flex;
								align-items: center;
							}
	
							.title {
								padding-left: 5px;
								font-size: 16px;
								//argin-bottom: 20px;
	
								span {
									font-size: 16px;
									font-family: "Impact Normal", "Impact", sans-serif;
								}
							}
	
							.item-list {
								height: 500px;
								overflow-y: auto;
							}
	
							.item_bd {
								position: relative;
								//width: 767px;
								// height: 194px;
								background-color: #f2f7f7;
								margin: 10px auto 30px;
								border-radius: 5px;
								padding: 20px 30px 10px 10px;
	
								&:hover {
									box-shadow: 10px 10px 5px #eae9e9;
	
									.add_img {
										display: block;
										cursor: pointer;
									}
								}
								
								.active{
									background-color: #eae9e9;
								}
	
								.info_hd {
									display: flex;
									justify-content: space-between;
									align-items: center;
	
									.hd_left {
										font-family: "Merriweather Regular", Merriweather, sans-serif;
										font-weight: 400;
										font-style: normal;
										font-size: 18px;
										color: rgb(64, 158, 255);
									}
	
									.hd_right {
										span {
											margin-right: 30px;
										}
									}
								}
	
								.tab_address {
									
									display: flex;
									align-items: center;
									margin: 10px 0;
	
									img {
										margin-right: 5px;
									}
								}
	
								.products_info {
									display: flex;
									flex-wrap: wrap;
									margin-top: 25px;
	
	
									.main_products-box {
										display: flex;
									}
	
									.main_products {
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										color: #333;
									}
	
									li {
										padding: 10px;
										width: 40%;
										margin-right: 40px;
	
										span {
											display: inline-block;
											width: 50%;
											color: #999;
										}
	
										b {
											font-family: "Impact Normal", "Impact", sans-serif;
											font-weight: normal;
										}
									}
								}
	
								.news_img {
									width: 40px;
									height: 40px;
									position: absolute;
									top: 0;
									right: 0;
								}
	
								.add_img {
									display: none;
									width: 32px;
									height: 32px;
									position: absolute;
									bottom: 30px;
									right: 40px;
								}
							}
						}
	
						.block-tab {
	
							.title {
								display: flex;
								justify-content: space-between;
								align-items: center;
	
								.search {
									width: 266px;
									height: 42px;
									padding: 2px 2px 10px 2px;
									background-color: #fff;
									font-weight: 400;
									font-style: normal;
									font-size: 13px;
									padding: 2px 30px 2px 8px;
									color: #797979;
									border: 1px solid #f2f2f2;
									border-radius: 5px;
									margin-right: 15px;
									background: url("@/assets/fangdajing.svg") no-repeat 95% center;
	
									&:focus {
										border: 1px solid #797979;
									}
								}
	
								button {
									width: 70px;
									height: 40px;
									border-radius: 5px;
									background-color: #169bd5;
									color: #fff;
								}
	
								.ad_search {
									width: 120px;
									background-color: #df2c20;
									margin-left: 8px;
								}
							}
						}
	
						.second_tab {
							.title {
								display: flex;
								justify-content: space-between;
								align-items: center;
	
								#search {
									width: 320px;
									height: 42px;
									padding: 2px 2px 10px 2px;
									background-color: #fff;
									font-weight: 400;
									font-style: normal;
									font-size: 13px;
									padding: 2px 4px 2px 8px;
									color: #797979;
									border: 1px solid #f2f2f2;
									border-radius: 5px;
									margin-right: 15px;
									
									&:focus {
										border: 1px solid #797979;
									}
								}
	
								button {
									width: 70px;
									height: 40px;
									border-radius: 5px;
									background-color: #169bd5;
									color: #fff;
								}
	
								.ad_search {
									width: 120px;
									background-color: #df2c20;
									margin-left: 8px;
								}
							}
						}
					}
	
					.slider {
						// 点击不同标签后，根据内容平移百分比切换展示内容
						-webkit-transform: translateX(-50%);
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	
	::v-deep .el-dialog__body{
		padding-bottom: 5px !important;
	}
	
	.tags {
		padding-top: 5px;
	
		.el-tag+.el-tag {
			margin-left: 5px;
		}
	
		.el-tag {
			margin-bottom: 5px;
		}
	}
	
	
	.requireStar:after {
		vertical-align: middle;
		content: ' *';
		color: rgba(255, 59, 48, 1);
		font-size: 100%;
	}
		
	#allTable ::v-deep .el-table__inner-wrapper{
		height: auto !important;
	}
	
</style>